<template>
    <van-nav-bar title="分类" left-text="返回" left-arrow @click-left="onClickLeft" />

    <van-tree-select v-model:main-active-index="firstCategoryId" v-model:active-id="secondCategoryId" height="55vw"
        :items="categoryData">
        <template #content>
            <div v-for="secondCategory in  categoryData[firstCategoryId].children">
                <van-divider dashed><span class="title">{{ secondCategory.text }}</span></van-divider>
                <van-grid :column-num="3" icon-size="53" :border="false">
                    <van-grid-item v-for="thirdCategory in secondCategory.children" :key="thirdCategory.id"
                        :icon="thirdCategory.img" :text="thirdCategory.text"
                        :to="'/product/list?categoryId=' + thirdCategory.id" />
                </van-grid>
            </div>
        </template>
    </van-tree-select>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
const firstCategoryId = ref(0);
const secondCategoryId = ref(0);
onMounted(() => {

})
const categoryData = ref([
    {
        text: '女装',
        children: [
            {
                text: '上衣',
                id: 1,
                children: [
                    { text: '风衣', id: 11, img: "https://img20.360buyimg.com/focus/s140x140_jfs/t19723/352/684172430/6158/801dfc66/5a9fbfc2N85844dd0.jpg" },
                    { text: '卫衣', id: 12, img: "https://img20.360buyimg.com/focus/s140x140_jfs/t19723/352/684172430/6158/801dfc66/5a9fbfc2N85844dd0.jpg" },
                    { text: '棒球衫', id: 13, img: "https://img20.360buyimg.com/focus/s140x140_jfs/t19723/352/684172430/6158/801dfc66/5a9fbfc2N85844dd0.jpg" },
                ]
            },
            {
                text: '下衣',
                id: 2,
                children: [
                    { text: '休闲裤', id: 31, img: "https://img20.360buyimg.com/focus/s140x140_jfs/t19723/352/684172430/6158/801dfc66/5a9fbfc2N85844dd0.jpg" },
                    { text: '背带裤', id: 32, img: "https://img20.360buyimg.com/focus/s140x140_jfs/t19723/352/684172430/6158/801dfc66/5a9fbfc2N85844dd0.jpg" },
                    { text: '牛仔裤', id: 33, img: "https://img20.360buyimg.com/focus/s140x140_jfs/t19723/352/684172430/6158/801dfc66/5a9fbfc2N85844dd0.jpg" },
                ]
            },
            {
                text: '裙装',
                id: 3,
                children: [
                    { text: '套装裙', id: 31, img: "https://img20.360buyimg.com/focus/s140x140_jfs/t19723/352/684172430/6158/801dfc66/5a9fbfc2N85844dd0.jpg" },
                    { text: '性感连衣裙', id: 32, img: "https://img20.360buyimg.com/focus/s140x140_jfs/t19723/352/684172430/6158/801dfc66/5a9fbfc2N85844dd0.jpg" },
                    { text: '背带裙', id: 33, img: "https://img20.360buyimg.com/focus/s140x140_jfs/t19723/352/684172430/6158/801dfc66/5a9fbfc2N85844dd0.jpg" },
                ]
            },
        ],
    },
    {
        text: '男装',
        children: [
            { text: 'T恤', id: 4 },
            { text: '牛仔裤', id: 5 },
            { text: '运动裤', id: 6 },
        ],
    }
]);
const onClickLeft = () => history.back();
</script>
<style>
.van-tree-select {
    min-height: 90vh
}

.van-grid-item__text {
    font-size: 8px !important;
}
</style>
<style scoped>
.title {
    font-weight: bolder;
    color: #000000
}
</style>